Purpose

Permits code to be imported directly from a source file into the web page. This means that the code can be checked by running it through a compiler. The code is displayed in a special div (class = "code") so that its appearance can be controlled within the style sheets.

Syntax colouring

The code will be automatically coloured for syntax. Currently the following classes are implemented:

• codeComment
• codeKeyword
• codeConstant

The appearance of each of these classes is controlled by the stylesheets and can easily be varied by an instructor to match the programming editor being used by students to write their own code.

Selections

It is often convenient to break up a piece of sample code into different sections to focus the discussion. For instance it is common to discuss first the implementation of a function then to focus on how its called. Rather than create separate TM code examples it is much more convenient to have a single source file and to show only those selections it is desirable to focus on.

WebWriter accomplishes this by pedagogical markup—that is by marking up the code using a simple markup language embedded in comments. The markup is automatically removed by both WebWriter and the Teaching Machine so that students never see it.

Selections are basically marked with letters and may be disjoint.

Available Functions

Arguments

relativeURL

a string giving the name & location of the code file to be loaded, relative to the page invoking the fuction.

buttonSet

a boolean. If true, a teaching machine link buttonSet is placed within the example. See next function for how to define a buttonSet

className

a string giving the name of the class for the HTML <div> that will hold the code. The author may argue the appearance of the code using the cascading style sheet used for pages.

configurationFile

a string giving the path of the configuration file (relative to the site root) which is passed to the TMApplet.readRemoteConfiguration routine. Authors may have as many configuration files as they want.

Optional Arguments

WWSelection

a string denoting which pieces of the code will be displayed in the TMContainer on the webPage, for example "A" would mean display all sections marked with an "A". See entry under padagogical markup for specific markup details. If set to "all" ( or left out) all code is displayed.

TMSelection

a string denoting which pieces of the code will be displayed in the Teaching Machine itself, when it is invoked; for example "A" would mean display all sections marked with an "A". See entry under padagogical markup for specific markup details. If set to "all" ( or left out) all code is displayed.

Return

Nothing is returned

The example code is downloaded from the source file, syntax coloured and pedagogically marked up, then written dynamically in HTML into the document at the point of invocation. If a buttonSet is called for it is added in.

Arguments

run

a bool. true if a button is desired for invoking the teaching machine.

video

a bool. true if a button to invoke a video is wanted.

edit

a bool. true if a button to invoke editing on the example is wanted.

videoR

a string. The name of the video file. Only needed if video is true.

guidedR

a string. Currently unused. May be omitted.

Optional Arguments

No extra arguments are recognized.

Return

Nothing is returned

The buttonSet is updated as directed.

WebWriter only maintains a single button set so it must be set every time buttons are to be used by insertCode.

InsertCode Snippet

This is a block snippet, set up for the generic case of an example with run, video and edit buttons (true entries in setButtons).

<script language="JavaScript">
setButtons(true, true, true,"tm_introduction.avi","");
insertCode("first_program.cpp", true, "code", "default.cfg");
</script>

Examples

The standard code snippet was inserted below, then edited to change the program to complex_print.cpp and to display only the code in the selections marked "A". (Since no video was available the second argument in setButtons was turned to false and the avi string was nulled out.)

Here is the exact same piece of code, now displaying the selection marked "M".

Here's the code snippet for an example that includes a video. The extension for the video is htm because the actual video is a shockwave animation (produced by macromedia's Captivate tool) encapsulated its own html page.

  <script language="JavaScript">
setButtons(true, true, true,"quadratic.htm","");
insertCode("quadratic.cpp", true, "code", "default.cfg", "A");
  </script>

And here is the actual example.